import React, { useContext, useState } from 'react'
import { Dropdown, Menu, Typography, Tag } from 'antd';
import { useMount } from 'react-use';
import If from '@/components/If';
import { obtainDictMap } from '@/pages/SalaryManage/utils';
import classNames from 'classnames';
import Context from '../../context';

import styles from './index.less';

const { Text } = Typography;

const SALARY_OBJECT_OPTIONS = 'salaryObjectOptions';
const TEMPLATE_CHANGE_STATUS_OPTIONS = 'templateChangeStatusOptions';
const DICT_NAME_LIST = [SALARY_OBJECT_OPTIONS, TEMPLATE_CHANGE_STATUS_OPTIONS];

const NORMAL = 0;
const ADD = 1;
const DELETE = 2;
const EDIT = 3;
const ENABLE = 4;
const DISABLE = 5;
const STATE_MAPPER = {
    [NORMAL]: {
        text: ''
    },
    [ADD]: {
        text: '新增',
        tag: 'green'
    },
    [DELETE]: {
        text: '移除',
        tag: 'red',
        itemStyle: {
            textDecoration: 'line-through',
            color: 'rgba(0, 0, 0, 0.15)'
        }
    },
    [EDIT]: {
        text: '编辑',
        tag: 'blue',
        itemStyle: {
            color: 'red'
        }
    },
    [ENABLE]: {
        text: '启用',
        tag: 'orange'
    },
    [DISABLE]: {
        text: '禁用',
        tag: 'magenta'
    }
};

const SalaryItem = ({ item, showChange, prefix, parentData }) => {
    const [salaryObjectEnum, setSalaryObjectEnum] = useState({});
    const [stateEnum, setStateEnum] = useState({});
    const [showDropDown, setShowDropDown] = useState(false);
    const state = item.status ?? NORMAL;
    const stateVo = STATE_MAPPER[state];
    const { contextState, setContextState } = useContext(Context);

    const handleMouseEnter = () => {
        setShowDropDown(true);
        setContextState({ ...contextState, currentItem: item });
    }

    const handleMouseLeave = () => {
        setShowDropDown(false);
        setContextState({ ...contextState, currentItem: null });
    }

    let isActive = false;
    if (
        contextState.currentPosition != null &&
        contextState.currentTemplate != null &&
        contextState.currentItem != null &&
        contextState.currentPosition !== prefix &&
        contextState.currentTemplate.month === parentData.month
    ) {
        const activeItem = contextState.getOppositeItem();
        console.log('activeItem:', activeItem);
        isActive = activeItem && activeItem.id === item.id;
    }

    useMount(() => {
        obtainDictMap(DICT_NAME_LIST).then(enumMap => {
            setSalaryObjectEnum(enumMap[SALARY_OBJECT_OPTIONS]);
            setStateEnum(enumMap[TEMPLATE_CHANGE_STATUS_OPTIONS] || {});
        });
    });

    return (
        <Dropdown
            trigger={['hover']}
            getPopupContainer={triggerNode => triggerNode.parentNode}
            overlay={() => (
                <Menu className={styles.dropdownBox}>
                    <Menu.Item className={styles.dropdownItem}>
                        <Text className={styles.dropdownLabel}>全称：</Text>
                        <Text>
                            {item.parentTitle}-{item.title}
                        </Text>
                    </Menu.Item>
                    <Menu.Item className={styles.dropdownItem}>
                        <If condition={!!item.formulaFlow}>
                            <Text className={styles.dropdownLabel}>审批流：</Text>
                            <Text>{item.formulaFlow}</Text>
                        </If>
                        <If condition={!!item.formulaFunc}>
                            <Text className={styles.dropdownLabel}>公式：</Text>
                            <Text>{item.formulaFunc}</Text>
                        </If>
                        <If condition={!!item.staffInfoName}>
                            <Text className={styles.dropdownLabel}>取值关联字段：</Text>
                            <Text>{item.staffInfoName}</Text>
                        </If>
                    </Menu.Item>
                    <Menu.Item className={styles.dropdownItem}>
                        <Text className={styles.dropdownLabel}>对象：</Text>
                        <Text>{salaryObjectEnum[item.salaryObject]}</Text>
                    </Menu.Item>
                </Menu>
            )}
            placement="topCenter"
            mouseEnterDelay={0.3}
            visible={showDropDown || isActive}
        >
            <div
                className={classNames(styles.salaryItem, { [styles.active]: isActive })}
                style={{ ...(showChange ? stateVo.itemStyle : {}) }}
                onMouseEnter={handleMouseEnter}
                onMouseLeave={handleMouseLeave}
            >
                <div>{item.parentTitle}</div>
                <div>-{item.title}</div>
                <If condition={stateVo.text && showChange}>
                    <div className={styles.state}>
                        <Tag color={stateVo.tag}>{stateEnum[state]}</Tag>
                    </div>
                </If>
            </div>
        </Dropdown>
    );
};

export default SalaryItem;
